<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div> -->
    <transition :name="tranName">
       <router-view class="fix"/>
    </transition>
    <van-tabbar route v-model="active">
      <van-tabbar-item icon="home-o" replace to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="wap-nav" replace to="/about">分类</van-tabbar-item>
      <van-tabbar-item icon="cart" replace to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager" replace to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data(){
    return{
      tranName: 'fadein',
      active: 0
    }
  },
  watch:{
    active(newVal,oldVal){
      // console.log(newVal,oldVal);
      if (newVal>oldVal){
        this.tranName = 'fade'
      } else{
        this.tranName = 'fadein'
      }
    }
  }
}
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
}
#app{
  height: calc(100% - 50px);
  position: relative;
  overflow: hidden;
}
.fix{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.fadein-enter{
  transform: translateX(-100%);
}
.fadein-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(100%);
}
.fadein-enter-active, .fadein-leave-active {
  transition: all .5s;
}


.fade-enter{
  transform: translateX(100%);
}
.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(-100%);
}
.fade-enter-active, .fade-leave-active {
  transition: all .5s;
}
</style>
